<template>
  <view class="page">
    <CommonNavbar :showBack="true" title="发布帖子"></CommonNavbar>
    <view class="main padding-lr-sm">
      <view class="margin-top">
        <textarea v-model="postData.content" placeholder="请输入话题和大家分享..."></textarea>
      </view>
      <view>
        <up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
          :maxCount="10"></up-upload>
      </view>
      <view class="theme-box" @click="selectTheme = true">
        <view class="flex-sub">
          <up-text text="选择话题" size="9" color="black"></up-text>
        </view>
        <view class="flex-sub">
          <up-text :text="currentTopic?.name || '选择话题获得更多的赞'" size="12" color="#666" align="right"></up-text>
        </view>
      </view>
    </view>
    <view class="footer">
      <up-button type="primary" @click="postCommunity" size="large" text="确定发布"
        :disabled="!postData.content"></up-button>
    </view>
    <up-action-sheet :actions="themeType" :show="selectTheme" :closeOnClickOverlay="true" :closeOnClickAction="true"
      @select="confirmTheme"></up-action-sheet>
  </view>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { postCommunityApi } from '@/api/community.js';
import { BASE_URL } from '@/utils/env.js';
import { themeType } from '@/utils/constant.js';
const fileList1 = ref([]);
const selectTheme = ref(false);
const currentTopic = ref({});
const postData = reactive({
  title: '',
  content: '',
  files: [],
  topicId: ''
});
const afterRead = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = fileList1.value.length;
  lists.map((item) => {
    fileList1.value.push({
      ...item,
      status: 'uploading',
      message: '上传中'
    });
  });
  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise(lists[i].url);
    let item = fileList1.value[fileListLen];
    fileList1.value.splice(fileListLen, 1, {
      ...item,
      status: 'success',
      message: '',
      url: result
    });
    fileListLen++;
  }
};

const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: `${BASE_URL}/file/upload`,
      filePath: url,
      name: 'file',
      header: {
        Authorization: uni.getStorageSync('token')
      },
      success: (res) => {
        const result = JSON.parse(res.data);
        postData.files.push(result.data);
        resolve(BASE_URL + result.data);
      }
    });
  });
};
const postCommunity = async () => {
  postData.topicId = currentTopic.value.id;
  const result = await postCommunityApi(postData);
  if (result.code == 200) {
    uni.$u.toast('发布成功');
    uni.navigateBack();
  }
};

const confirmTheme = (item) => {
  console.log('item', item);
  currentTopic.value = item;
  selectTheme.value = false;
};
</script>
<style lang="scss" scoped>
.theme-box {
  display: flex;
  background: #f3f3f3;
  padding: 20rpx;
  margin-top: 40rpx;
}
</style>
